<!--
 *@Description: 动态排序柱状图
 *@Author: ʟɪ ᴢʜɪ ᴛᴏɴɢ
 *@Date: 2022-10-17 13:13:57
-->
<template>
  <div id="dynamicOrderChart"></div>
</template>

<script>
export default {
  name: 'dynamicOrder',
  data() {
    return {
      newArr: [
        {
          cdate: '四月',
          cname: '电子文件, 声像文件, 移交证明, 项目报建, 文件补交, 档案验收',
          cut: '79,63,58,66,69,38,'
        },
        {
          cdate: '五月',
          cname: '电子文件, 声像文件, 移交证明, 项目报建, 文件补交, 档案验收',
          cut: '69,79,81,93,42,58,'
        },
        {
          cdate: '六月',
          cname: '电子文件, 声像文件, 移交证明, 项目报建, 文件补交, 档案验收',
          cut: '89,63,58,66,79,48,'
        },
        {
          cdate: '七月',
          cname: '电子文件, 声像文件, 移交证明, 项目报建, 文件补交, 档案验收',
          cut: '60,79,81,93,42,18,'
        },
        {
          cdate: '八月',
          cname: '电子文件, 声像文件, 移交证明, 项目报建, 文件补交, 档案验收',
          cut: '99,63,28,56,49,48,'
        },
        {
          cdate: '九月',
          cname: '电子文件, 声像文件, 移交证明, 项目报建, 文件补交, 档案验收',
          cut: '60,19,91,83,42,18,'
        },
        {
          cdate: '四月',
          cname: '电子文件, 声像文件, 移交证明, 项目报建, 文件补交, 档案验收',
          cut: '89,63,58,66,79,38,'
        }
      ],
      option: null,
      mychart: null,
      monthIndex: 0
    };
  },
  mounted() {
    this.initEcharts();
  },
  methods: {
    initEcharts() {
      this.myChart = this.$echarts.init(
        document.getElementById('dynamicOrderChart')
      );
      var month = [];
      var startIndex = 0;
      for (var i = 0; i < this.newArr.length; ++i) {
        if (month.length == 0) {
          month.push(this.newArr[i]);
        }
      }
      var startMonth = month[startIndex].cdate;
      var startName = month[startIndex].cname.split(',');
      var startCut = month[startIndex].cut.split(',');
      this.option = {
        grid: {
          top: 10,
          bottom: 30,
          left: 70,
          right: 30
        },
        xAxis: {
          max: 'dataMax',
          splitLine: {
            show: true,
            lineStyle: {
              color: 'rgba(19,229,227, 0.4)',
              type: 'dashed'
            }
          },
          axisLabel: {
            textStyle: {
              fontSize: 14,
              color: '#fff'
            }
          }
        },
        // dataset: {
        //   source: this.newArr
        // },
        yAxis: {
          type: 'category',
          inverse: true,
          data: startName,
          axisLabel: {
            show: true,
            textStyle: {
              fontSize: 14,
              color: '#fff'
            },
            rich: {
              flag: {
                fontSize: 25,
                padding: 5
              }
            }
          },
          animationDuration: 300,
          animationDurationUpdate: 300
        },
        series: [
          {
            realtimeSort: true,
            seriesLayoutBy: 'column',
            type: 'bar',
            itemStyle: {
              color: function(params) {
                var colorList = [
                  '#00A3E0',
                  '#FFA100',
                  '#ffc0cb',
                  '#CCCCCC',
                  '#BBFFAA',
                  '#749f83'
                ];
                return colorList[params.dataIndex];
              }
            },
            encode: {
              x: 0,
              y: 3
            },
            label: {
              show: true,
              precision: 1,
              position: 'right',
              valueAnimation: true,
              fontFamily: 'monospace',
              formatter: function(data) {
                return data.data;
              }
            },
            data: startCut
          }
        ],
        animationDuration: 0,
        animationDurationUpdate: 1000,
        animationEasing: 'linear',
        animationEasingUpdate: 'linear',
        graphic: {
          elements: [
            {
              type: 'text',
              right: 30,
              bottom: 60,
              style: {
                text: startMonth,
                font: 'bolder 40px monospace',
                fill: 'rgba(229,229,227, 0.4)'
              },
              z: 100
            }
          ]
        }
      };
      this.myChart.setOption(this.option);
      this.eventLoop(this.monthIndex);
    },
    eventLoop(monthIndex) {
      for (var i = monthIndex; i < this.newArr.length - 1; ++i) {
        var that = this;
        (function(i) {
          setTimeout(function() {
            that.monthIndex = i;
            that.updateMonth(that.newArr[i + 1]);
          }, (i + 1) * 2000);
        })(i);
      }
    },
    updateMonth(month) {
      let option = Object.assign({}, this.option);
      option.yAxis.data = month.cname.split(',');
      option.series[0].data = month.cut.split(',');
      option.graphic.elements[0].style.text = month.cdate;
      this.myChart.setOption(option);
    }
  },
  watch: {
    monthIndex: {
      deep: true,
      handler: function(newVal, oldVal) {
        if (newVal == this.newArr.length - 2) {
          this.eventLoop(-1);
        }
      }
    }
  }
};
</script>

<style scoped>
#dynamicOrderChart {
  padding: 20px 0;
  width: 90%;
  height: 95%;
  margin: 10px 5%;
}
</style>
